<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CoffeTech Slider</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
    crossorigin="anonymous"></script>
  <!-- http://jquery.malsup.com/cycle/ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js" integrity="sha256-hoZ4IJEICzE5WkO5BNpeld27HjOZrSOuz0IWD8MoKdM="
    crossorigin="anonymous"></script>

  <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div id="container">
    <h1>CoffeeTech</h1>
    <div class="slider">
      <img src="https://i.postimg.cc/HsPMZKyQ/slide1.jpg" width="640" height="426">
      <img src="https://i.postimg.cc/mZjCMhZp/slide2.jpg" width="640" height="426">
      <img src="https://i.postimg.cc/m2rMSRtL/slide3.jpg" width="640" height="426">
      <img src="https://i.postimg.cc/YCGWJ36T/slide4.jpg" width="640" height="426">
      <img src="https://i.postimg.cc/rwBrcrgs/slide5.jpg" width="640" height="426">
    </div>

    <ul id="nav">
      <li id="prev"><a href="#">Previous</a></li>
      <li id="next"><a href="#">Next</a></li>
    </ul>

  </div>





  <script>
    $(document).ready(function () {
      $('.slider').cycle({
        // fx: 'fade',
        // fx: 'shuffle',
        // fx: 'zoom',
        fx: 'turnDown',
        pause: 1,
        prev: '#prev',
        next: '#next'
      })
    })
  </script>

</body>

</html>